<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>vue 回顾</title>
    <style>
      .red {
        color: red;
      }
      .yellow {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div :class="isActiveObj" :style="`fontSize:${isStyleObj.fontSize}px`">
        {{name}}
      </div>
      <!-- v-model 是什么： 是一个语法糖，他是 ：value 值 和 @input 事件组合的 -->
      <input type="text" v-model="input" />
      <div>
        <button @click="toggle">点击切换</button>
      </div>
      <div v-if="tcon ==1">01 内容</div>
      <div v-else-if="tcon ==2">02 内容</div>
      <div v-else>03 内容</div>
      <!-- 什么时候适用index： 本地写死数据的时候，适用index -->
      <!-- 什么时候不太适用index
      动态数据。存在唯一标识。因为，数据在更新的过程当中，dom 也在不停的变化，如果数组当中插入了一条
      数据，那么用index的时候，从当前插入的这一条数据开始到最后一条，index 都会变化，如果使用数组当中
      的唯一标识，那么只是插入了一条数据，不影响之后的其他数据
      -->
      <!-- v-for还可以循环对象 -->
      <div v-for="(item,index) in array" :key="index">
        <div>{{item.name}}</div>
      </div>
      <!-- v-show即合display:none -->
      <!-- 驼峰命名法  是一种规则-->
      <div v-show="isShow">
        <div>显示和隐藏</div>
      </div>
      <div>
        <!-- .number 定义数据  .stop 禁止冒泡  .capture禁止捕获 .prevent 禁止默认事件 .trim 去除空格 .once 只能点一次 .self 调用-->
        <!-- <input type="text" v-model.number=""> -->

        <!-- 组件传值 7种方式 -->
        <!--生命周期：  beforeCreate created beforeMount mounted beforeUpdate updated
        beforeDestroy  destroy
        -->
        <!-- filters (){{  前边是绑定的数据 | 过滤器名字}} -->
        <!-- watch 和 computed 
        watch 是监听某个属性或者某个字段的值的变化 deep 和immediate
        computed 计算属性，具有字段缓存属性。里边可以通过计算属性来缓存多个字段。
        并且，数据发生变化，该方法即发生变化。计算属性的方法名字不能在data中定义
        （购物车，通过计算获取的数据）
        -->
        <!-- $set 更新视图数据的。更新数组中的对象，或者某个Object中属性 this.$set(对象，’属性名‘，值)-->
        <!--  -->
      </div>
      <div>

      </div>
    </div>
    <script>
      new Vue({
        el: "#app",
        // 什么时候是个函数，什么时候是个对象
        // 默认情况下vue-cli 是单页面应用。能写成多页面应用（webpack 配置pages模块，也就是打包的模块，以及要在
        // public 下添加其他的html页面）*
        //
        data: {
          name: "10",
          isActiveObj: {
            red: true,
            yellow: false,
          },
          isStyleObj: {
            fontSize: 30,
          },
          input: "",
          tcon: 1,
          array: [
            {
              name: '1'
            }
          ],
          isShow: false
        },
        filters: {

        },
        mounted() {
          this.loops()
        },
        methods: {
          toggle() {
            // if(this.tcon == 2) {
            //   this.tcon = 1
            // }else if(this.tcon == 1) {
            //   this.tcon = 3
            // }else if(this.tcon == 3) {
            //   this.tcon = 2
            // }
            // ??? 调查如果20个if ，进行判断，那么最优解是什么？ 百度，google，去查资料
            switch (this.tcon) {
              case 1:
                this.tcon = 3;
                break;
              case 2:
                this.tcon = 1;
                break;
              case 3:
                this.tcon = 2;
                break;
              default:
                break;
            }
          },
          loops() {
            // 事件循环机制：
            // 分为同步任务和异步任务。同步任务自上而下执行，也就是最外层的console.log(1);
            // 异步任务：分为微任务和宏任务
            console.log(1);
            setTimeout(()=> {
              console.log(2)
              setTimeout(()=> {
                console.log(3)
              })
            })
            console.log(4);
            // nextTick 进行延迟加载 属于宏任务
            this.$nextTick(()=> {
              console.log(5)
            })
            new Promise((res,rej)=> {
              console.log(6);
              res();
              console.log(7)
            }).then((res)=> {
              console.log(8)
            })
            console.log(9)
          }
          // 1,4,6,7,9,5,8,2,3




        },
      });
    </script>
  </body>
</html>
